<template>
	<view class="page">
		<navHead :datas="headData"></navHead>
		<view class="content_box ">
			<view class="flex-end">
				<view class="ft-22 c-99">提现说明</view>
				<image src="https://cdn.oss.bon-top.cn/static_bc/images/illus.png" class="wh-22"
					style="margin-left: 4rpx;" mode="widthFix"></image>
			</view>
			<view class="bank pd-20 mt-20">
				<view class="flex-bwt">
					<view class="ft fw-800">到账银行卡</view>
					<view class="ft-22 c-99">支持各大银行卡</view>
				</view>
				<view class="select flex-bwt pd-20 mt-20" @click="showO = true">
					<view class="ft-24 c-66" v-if="checkBankInfo">{{ checkBankInfo?.bank_type?.name }}
						{{ checkBankInfo?.bank_num }}</view>
					<view class="ft-24 c-99" v-else>请选择</view>
					<view class="r flex-end">
						<view class="txt" v-if="checkBankInfo">48小时内到账</view>
						<image src="https://cdn.oss.bon-top.cn/static_bc/images/icon_left.png" class="wh-24 ml-10"
							mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="cashback pd-20 mt-20">
				<view class="ft fw-800">提现返现券</view>
				<view class="quanItem flex mt-20">
					<view class="arrow">
						<view class="tip ft ft-20 flex-center c-ff">拼团返现</view>
						<view class="mt-24 flex-center">
							<view>
								<view class="ft-num ft-32 text_center">￥{{ bankData.reduce }}</view>
							</view>
						</view>
					</view>
					<view class="right pd-20 flex">
						<view style="width: 100%;">
							<view class="ft fw-800">下订立减,返现券</view>
							<view class="ft c-99 mt-10">提现后48小时内到账</view>
						</view>
					</view>
				</view>
				<view class="ft-22 c-99 mt-20">已选择提现返现金额 <text class="c-red fw-800">￥{{ bankData.reduce }}</text></view>
			</view>

			<view style="height: 166rpx;"></view>
			<view class="bottomBtn flex-center">
				<view class="btn flex-center ft c-dbf" @click="openC">申请提现</view>
			</view>
		</view>
	</view>

	<view class="mask" v-if="showO || showC"></view>
	<view class="offers" v-if="showO">
		<image class="popup-close wh-36" @click="closeO"
			src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png"></image>
		<view class="ft-32 ft1">选择到账银行卡</view>
		<scroll-view scroll-y="true" class="scroll-Y">
			<view class="bank-item flex mt-20 pd-20" v-for="item in bankList" :key="item.id" @click="checkBank(item)">
				<view class="l flex-center mr-20">
					<image :src="item.bank_type.logo" class="logo" mode="widthFix"></image>
				</view>
				<view class="r">
					<view class="ft fw-800">{{ item.bank_type.name }} {{ item.bank_num }}</view>
					<view class="ft-24 c-99 mt-10">48小时内到账</view>
				</view>
			</view>


			<view class="flex-center add pd-20 mt-20" @click="goAddBank">
				<image src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png" class="wh-32 mr-10"
					mode="widthFix"></image>
				<view class="ft">添加银行卡，微信，支付宝</view>
			</view>
		</scroll-view>
	</view>

	<view class="confirm-cash flex-center" v-if="showC">
		<view class="main pd-30">
			<view class="flex-bwt">
				<view></view>
				<view class="ft-32 c-33 fw-800">确定要提现吗</view>
				<image class="wh-36" @click="closeC" src="https://cdn.oss.bon-top.cn/static_bc/images/popup-close.png">
				</image>
			</view>
			<view class="m flex-c-center mt-20">
				<view class="flex">
					<view class="ft-28 c-33 fw-800">￥</view>
					<view class="ft-num price">{{ bankData.reduce }}</view>
				</view>
				<view class="ft">申请返现券提现</view>
			</view>
			<view class="c mt-20 pd-20">
				<view class="flex-bwt">
					<view class="ft c-99">到账银行</view>
					<view class="ft fw-800">{{ checkBankInfo.bank_type.name }}</view>
				</view>
				<view class="flex-bwt mt-20">
					<view class="ft c-99">卡号</view>
					<view class="ft fw-800">{{ checkBankInfo.bank_num }}</view>
				</view>
			</view>
			<view class="btn-box flex-center mt-30">
				<view class="btn1 mr-30 flex-center" @click="showC = false">取消</view>
				<view class="btn2 flex-center" @click="sureCash">确认</view>
			</view>
		</view>
	</view>

</template>

<script setup lang="js">
import {
	ref,
	reactive
} from "vue";
import {
	utils
} from '@/utils/utils.js';
import {
	api
} from '@/utils/api.js';
import {
	onLaunch,
	onLoad,
	onShow,
	onReachBottom
} from "@dcloudio/uni-app";

import navHead from '@/components/navHead.vue';
const headData = reactive({
	color: '#fff',
	title: '申请提现'
})

const showO = ref(false)
const closeO = () => {
	showO.value = false
}

const showC = ref(false)
const closeC = () => {
	showC.value = false
}

const user_bank_id = ref('')
const checkBankInfo = ref(null)
const openC = () => {
	if (!user_bank_id.value) {
		uni.showToast({
			duration: 1500,
			title: '请选择银行卡',
			icon: 'none',
		})
		return
	}
	showC.value = true
}

const bankData = ref({})
const bankList = ref([])
const id = ref('')
const isSettings = ref(false)
const defaults = reactive(['tfCI_5qzp8vmL1m-zUsb36bkG-iNjuCxBpHMN60W6FA'])//提现结果通知
onLoad((options) => {
	id.value = options.id
	reloadData()
	wx.getSetting({
		withSubscriptions: true,

		success(res) {
			if (res.subscriptionsSetting.itemSettings) {

				isSettings.value = defaults.some(f => res.subscriptionsSetting.itemSettings[f])
				// if (res.subscriptionsSetting.itemSettings['Urp9k7LRaQPJzoZIqQuaZJhmn2docH7YLzaPpAaKm9k']) isSettings.value = true
			}
		}
	})
})

const reloadData = () => {
	utils
		.request(
			api.applyCash, {
			id: id.value
		},
			"post"
		)
		.then((res) => {
			bankData.value = res.data.info
			bankList.value = res.data.user_bank_list
		});
}

// 页面显示时检测刷新标记
onShow(() => {
	const app = getApp();
	if (app.globalData.shouldRefresh) {
		reloadData()
		app.globalData.shouldRefresh = false;
	}
})

const goAddBank = () => {
	uni.navigateTo({
		url: '/subpackage/bank/editBank',
	});
}

const checkBank = (item) => {
	user_bank_id.value = item.id
	checkBankInfo.value = item
	showO.value = false
}

const sureCash = () => {
	// 订阅消息
	if (!isSettings.value) {
		wx.requestSubscribeMessage({
			tmplIds: defaults,
			success(res) {
				utils.subscribeMessage(res)
			},
			complete(res) {
				submit()
			}
		})
	} else {
		submit()

	}
}
const submit = () => {
	utils
		.request(
			api.applyCash, {
			id: id.value,
			is_sub: 1,
			user_bank_id: user_bank_id.value
		},
			"post"
		)
		.then((res) => {
			showC.value = false
			uni.redirectTo({
				url: `/subpackage/userCoupon/cashDetail?id=${id.value}`,
			});
		});
}
</script>

<style lang="scss" scoped>
.content_box {
	background: #FFFFFF;
	padding: 20rpx 30rpx;
	box-sizing: border-box;
}

.bank {
	background: #F8F8F8;
	border-radius: 20rpx;

	.select {
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.r {
		flex-shrink: 0;

		.txt {
			font-size: 22rpx;
			color: #1F18EE;
		}
	}
}

.cashback {
	background: #FFF3EC;
	border-radius: 20rpx;

	.quanItem {
		.arrow {
			width: 182rpx;
			height: 144rpx;
			background: linear-gradient(90deg, #dbf046 0%, #ffee7e 100%);
			border-radius: 20rpx;

			.tip {
				padding: 4rpx;
				width: fit-content;
				background: #333333;
				border-radius: 20rpx 8rpx 8rpx 8rpx;
			}
		}

		.right {
			width: 508rpx;
			height: 144rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			position: relative;
		}
	}
}

.bottomBtn {
	position: fixed;
	z-index: 99;
	bottom: 0;
	left: 0;
	background: #F8F8F8;
	width: 100%;
	padding-top: 10rpx;
	padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
	box-shadow: 0rpx -2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 690rpx;
		height: 78rpx;
		background: #DBF046;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #333333;
	}
}

.mask {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 998;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.4);
}

.offers {
	position: fixed;
	bottom: 0;
	left: 0;
	box-shadow: 0rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.05);
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	z-index: 999;
	width: 100vw;
	height: 50vh;
	background: #f8f8f8;
	//border: 2rpx solid red;
	// position: relative;
	padding: 40rpx;
	box-sizing: border-box;
	padding-bottom: calc(44rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(44rpx + env(safe-area-inset-bottom));

	.popup-close {
		position: absolute;
		top: 44rpx;
		right: 44rpx;
	}

	.scroll-Y {
		height: calc(100% - 104rpx + env(safe-area-inset-bottom));
		padding-top: 20rpx;
	}

	.bank-item {
		background: #FFFFFF;
		border-radius: 20rpx;

		.l {
			width: 80rpx;
			height: 80rpx;
			background: #F8F8F8;
			flex-shrink: 0;
			border-radius: 50%;

			.logo {
				width: 55rpx;
				height: 55rpx;
			}
		}
	}

	.add {
		background: #F1F1F1;
		border-radius: 20rpx;
	}
}

.confirm-cash {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 1000;
	width: 100vw;
	height: 100vh;

	.main {
		width: 518rpx;
		background: #FFFFFF;
		border-radius: 40rpx;

		.m {
			padding: 40rpx 0;
			box-sizing: border-box;
			background: #F8F8F8;
			border-radius: 20rpx;

			.price {
				font-size: 68rpx;
				color: #333333;
			}
		}

		.c {
			background: #F8F8F8;
			border-radius: 20rpx;
		}

		.btn1 {
			width: 184rpx;
			height: 80rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #333333;
		}

		.btn2 {
			width: 184rpx;
			height: 80rpx;
			background: #333333;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #DBF046;
		}
	}
}

::v-deep .uni-sample-toast {
	max-width: 690rpx;
}

::v-deep .uni-simple-toast__text {
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 20rpx 2rpx rgba(0, 0, 0, 0.1);
	border-radius: 20rpx;
	padding: 20rpx 40rpx;
	box-sizing: border-box;
	max-width: 690rpx;
	font-size: 28rpx;
	color: #333333;
}
</style>